<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="com.rbcs.base.company.CompanyHelp" %>    
<%@include file="/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>编辑部门</title>
<%@include file="/common/meta.jsp" %>
<%@include file="/common/extjs.jsp" %>
<link href="${ctx}/styles/treeSelect.css" type='text/css' rel='stylesheet'>
<style type="text/css">
  .select{
    width: 30px;
    font-weight: bold;
  }
</style>
</head>
<body>
<div class="x-toolbar" style="padding: 5px;">&nbsp;</div>
<div class="x-panel">
<div align="center" style="margin-top: 5px;">
  <div style="width: 600px; margin: 5px auto;">
 	<%@ include file="/common/messages.jsp"%>
  </div>
  <s:form id="saveDeptForm" action="saveConfig" theme="simple" validate="true" method="post" onsubmit="selectAll()">
  <fieldset style="width:600px;">
  <legend>部门信息编辑</legend>
  <s:hidden name="model.serialNo"/>
  <table width="500" style="line-height:25px;" align="center">
     <tr>
       <td width="80" align="right">选择部门：</td>
       <td width="320">
         <div id="comboxWithTree"></div>
         <s:hidden name="model.id" id="modelid"></s:hidden>
       </td>
    </tr>
    <tr>
       <td width="80" align="right">部门编号：</td>
       <td width="320">
         &nbsp;${model.serialNo }
       </td>
     </tr>
     <tr>
       <td colspan="2">
         <table width="460" cellpadding="0" cellspacing="0">
           <tr>
	         <td align="left" colspan="3" style="padding-left: 18px; padding-bottom: 5px;">
	           <span>预算周期：</span>
	           <s:radio name="model.budgetType" list="#{'month':'月度预算','quarter':'季度预算' }" cssStyle="border:0px;"></s:radio>
	         </td>
	       </tr>
           <tr>
             <td width="200" valign="bottom">
               <select id="unSelectedItems" ondblclick="selectItem()" multiple="multiple" style="width:200px; height:350px; margin-bottom: -10px;">
                 <s:iterator value="unSelectedItems" var="item">
                   <option value="${item.id}">${item.code}&nbsp;${item.name}</option>
                 </s:iterator>
               </select>
             </td>
             <td width="60" align="center">
               <input type="button" value="&gt;" class="button select" onclick="selectItem()"><br><br>
               <br><br><br><br>
               <input type="button" value="&lt;" class="button select" onclick="unSelectItem()"><br><br>
             </td>
             <td width="200">
               <select id="selectedItems" ondblclick="unSelectItem()" name="selectedItemIds" multiple="multiple" style="width:200px; height:350px; margin-bottom: -10px;">
                  <s:iterator value="model.items" var="item">
                   <option value="${item.id}">${item.code}&nbsp;${item.name}</option>
                 </s:iterator>
               </select>
             </td>
           </tr>
         </table>
       </td>
     </tr>
  </table>
  </fieldset>
  <table align="center">
  <tr>
    <td colspan="2" align="center" height="40">
   	 <input type="submit" value="保存" class="button">&nbsp;&nbsp;&nbsp;&nbsp;
   	 <input type="reset" value="重置" class="button">
    </td>
  </tr>
  </table>
  </s:form>
  </div>
</div>
<script type="text/javascript" src="${ctx}/pages/admin/dept/edit.js"></script>
<script type="text/javascript">
var rootName = '<%=CompanyHelp.getComName()%>';
var initValue = '${model.name}';
if (initValue.length == 0){
	initValue = rootName;
}
Ext.onReady(function() {
	var dtree = new DeptTree({
		url : '/admin/dept/deptTree.do',
		rootName: rootName,
		initValue : initValue,
		el : 'comboxWithTree',
		innerTree :'inner-tree',
		onclick : function(nodeId) {
		  Ext.get('modelid').dom.value = nodeId;
		  if (nodeId != null && nodeId > 0){
			  window.location.href = "editConfig.do?model.id=" + nodeId;
		  }else{
			  alert("请选择具体部门");
		  }
		}
	});
	dtree.init();	
});

function selectItem(){
	$("#unSelectedItems option:selected").each(function(){
		$("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>").appendTo($("#selectedItems"));
		$(this).remove();
	});
}

function unSelectItem(){
	$("#selectedItems option:selected").each(function(){
		$("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>").appendTo($("#unSelectedItems"));
		$(this).remove();
	});
}

function selectAll(){
	$("#selectedItems option").each(function(){
		$(this).attr("selected", "selected");
		
	});
}
</script>

</body>
</html>